<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>百度体生成器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <style>
      .topic-noun, .topic-verb, .topic {
        color: red;
        text-decoration: underline;
      }
      .link {
        text-decoration: underline;
        color: blue;
      }
      .entry {
        margin-bottom: 1rem;
      }
      .entry .date {
        color: grey;
      }
      .entry p {
        font-size: 13px;
        color: black;
      }
    </style>
  </head>
  <body>
    <section class="section">
      <div class="container">
        <h1 class="title">
          百度体生成器
        </h1>
        <p class="subtitle">
          <strong>百度体</strong>是怎么回事呢？
        </p>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-half">
            <img src="./baidu_logo.png" style="height: 150px; display: block; margin-left: auto; margin-right: auto;">
            <div class="field has-addons">
              <p class="control is-expanded">
                <input class="input" type="text" id="search-query-noun" placeholder="百度APP">
              </p>
              <p class="control is-expanded">
                <input class="input" type="text" id="search-query-verb" placeholder="被约谈">
              </p>
              <p class="control">
                <a class="button is-info" id="search">
                  百度一下
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <div class="columns">
          <div class="column is-half">
            <div class="entry">
              <a href="https://gitee.com/Neotoxin/BaiduMemeGen" class="link">
                <span class="topic-noun"></span> - 百度新闻
              </a>
              <p>
                <span class="date"></span>
                <span> - </span>
                <span>
                  <span class="topic"></span>是怎么回事呢？<span class="topic-noun"></span>相信大家都很熟悉，
                  但是<span class="topic"></span>是怎么回事呢？下面就让小编带大家一起了解吧。
                  <span class="topic"></span>，其实就是<span class="topic"></span>了。
                  大家可能会感到很惊讶，<span class="topic-noun"></span>怎么会<span class="topic-verb"></span>呢？...
                  但事实就是这样，小编也感到非常惊讶。
                  那么这就是关于<span class="topic"></span>的事情了，大家有什么想法呢？欢迎在评论区告诉小编一起讨论哦
                </span>
              </p>
            </div>
            <div class="entry">
              <a href="https://gitee.com/Neotoxin/BaiduMemeGen" class="link">
                <span class="topic"></span> - 百度百家
              </a>
              <p class="entry">
                <span class="date"></span>
                <span> - </span>
                <span>
                  感谢大家点进小编的文章，谢谢啦。大家有什么想法和评论，欢迎在文章结尾下方留言。下面直接进入正文。
                  可能有人不理解，为什么<span class="topic-noun"></span>会<span class="topic-verb"></span>呢？<span class="topic-noun"></span>早期可是世界闻名的，看图片就知道了。 ... 好了，今天的娱乐新闻就到这里了，各位看官有什么想说的，欢迎在评论区留言告诉小编哦。小编会在第一时间回复大家的，让我们一起讨论，一起八卦<span class="topic"></span>。
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script type="text/javascript">
      function search(noun, verb) {
        verb = verb || document.getElementById('search-query-verb').value;
        noun = noun || document.getElementById('search-query-noun').value;
        const topic = noun + verb;
        Array.prototype.forEach.call(document.getElementsByClassName('topic-noun'), (el) => el.innerText = noun);
        Array.prototype.forEach.call(document.getElementsByClassName('topic-verb'), (el) => el.innerText = verb);
        Array.prototype.forEach.call(document.getElementsByClassName('topic'), (el) => el.innerText = topic);
        Array.prototype.forEach.call(document.getElementsByClassName('date'), (el) => {
          const date = new Date();
          el.innerText = `${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日`;
        });
      }
      document.getElementById('search').onclick = () => search();
      search('百度APP', '被约谈')
    </script>
  </body>
</html>
